<template>
  <div class="user-container">
    <el-dialog v-if="needModifiedUser !== null" title="修改用户信息" :visible.sync="showModifyDialog">
      <el-row type="flex" justify="center" class="row">
        <label>用户名称</label>
        <el-input v-model="needModifiedUser.userName" type="text" placeholder="请输入用户名称" />
      </el-row>
      <el-row type="flex" justify="center" class="row">
        <label>用户手机号</label>
        <el-input v-model="needModifiedUser.userPhone" type="text" placeholder="请输入用户手机号" />
      </el-row>
      <el-row type="flex" justify="center" class="row">
        <label>用户机构名</label>
        <el-input v-model="needModifiedUser.userOrg" type="text" placeholder="请输入用户机构名" />
      </el-row>
      <el-row type="flex" justify="center" class="row">
        <el-button type="primary" @click="handleEdit()">提交</el-button>
        <el-button @click="reset()"> 重置</el-button>
      </el-row>
    </el-dialog>
    <el-table :data="userTable" border style="width: 100%" max-height="500px">
      <el-table-column type="index" label="序号" width="70" align="center" />
      <el-table-column prop="userId" label="账号" width="150" align="center" />
      <el-table-column prop="userName" label="姓名" width="150" align="center" />
      <el-table-column prop="userPhone" label="手机号" width="150" align="center" />
      <el-table-column prop="userRole" label="角色" width="150" align="center" />
      <el-table-column prop="userOrg" label="机构" width="150" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="small" @click="showDialog(scope.row)">修改</el-button>
          <el-button type="warning" icon="el-icon-close" size="small" @click="handleDisable(scope.row)">停用</el-button>
          <el-button type="primary" icon="el-icon-refresh" size="small" @click="handleReset(scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="left" class="pagination">
      <el-pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[5,10,20,50]"
        layout="sizes,prev,pager,next,total"
        :total="totalCount"
        @size-change="handleUserSizechange"
        @current-change="handleUserCurrentchange"
      />
    </el-row>
  </div>
</template>

<script>
import { login, logout } from '@/api/login'
import { queryUserList, queryParamList, saveUser, modifyUser, disableUser, resetPassword,
  modifyParam, modifyPassword } from '@/api/sys'
import store from '@/store'
import { MessageBox } from 'element-ui'
import { getUserInfo } from '@/api/user.js'
import router from '@/router'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      userTable: [],
      pageSize: 5,
      currentPage: 1,
      totalCount: 0,
      showModifyDialog: false,
      needModifiedUser: null,
      initUser: null
    }
  },

  mounted() {
    this.initData()
  },
  methods: {
    reset() {
      this.showModifyDialog = false
      this.showDialog(this.initUser)
    },
    initData() { // 初始化数据
      const params = {
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }
      queryUserList(params).then(res => {
        // console.log(res);
        var users = res.list
        for (var i = 0; i < users.length; i++) {
          if (users[i].userRole == 'SUPER_ADMIN') {
            users[i].userRole = '超级管理员'
          } else if (users[i].userRole == 'UNION_ADMIN') {
            users[i].userRole = '工会管理员'
          } else if (users[i].userRole == 'COMPANY_TRANSACTOR') {
            users[i].userRole = '企业经办人'
          }
        }
        this.userTable = users
        this.totalCount = res.totalSize
      }).catch(err => {
        console.log(err)
      })
    },
    handleDisable(val) { // 停用用户
      // console.log(val)
      this.$confirm('本次操作将停用【' + val.userName + '】用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disableUser(val.userId).then(res => {
          this.sucMsg('【' + val.userName + '】已停用')
          this.initData()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.infoMsg('已取消')
      })
    },
    handleUserSizechange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.initData()
    },
    handleUserCurrentchange(val) {
      this.currentPage = val
      this.initData()
    },
    showDialog(val) {
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          const params = {
            userId: val.userId
          }
          queryUserList(params).then(res => {
            if (res.retCode === '0000') {
              this.needModifiedUser = res.list[0]
              this.initUser = res.list[0]
            } else {
              this.$message.error(res.retMsg)
            }
          })
          this.showModifyDialog = true
        }
      })
    },
    handleEdit() {
      modifyUser(this.needModifiedUser).then(res => {
        this.sucMsg('【' + this.needModifiedUser.userName + '】用户信息已修改')
        this.initData()
        this.initUser = null
        this.showModifyDialog = false
      }).catch(err => {
        console.log(err)
      })
    },
    handleReset(val) { // 重置密码
      this.$confirm('本次操作将重置【' + val.userName + '】用户的密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetPassword(val.userId).then(res => {
          this.sucMsg('【' + val.userName + '】密码已重置')
          this.initData()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.infoMsg('已取消')
      })
    },
    infoMsg(msg) { // 普通信息
      this.$message({
        message: msg,
        type: 'info',
        duration: 3 * 1000
      })
    },
    warnMsg(msg) { // 警告信息
      this.$message({
        message: msg,
        type: 'warning',
        duration: 3 * 1000
      })
    },
    errorMsg(msg) { // 错误信息
      this.$message({
        message: msg,
        type: 'error',
        duration: 3 * 1000
      })
    },
    sucMsg(msg) { // 成功信息
      this.$message({
        message: msg,
        type: 'success',
        duration: 3 * 1000
      })
    }
  }
}
</script>
<style>
  .row {
    width: 500px;
    display: flex;
  }
  .row label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
  }
  .pagination{
    display: flex;
    justify-content: center;
   }
</style>
<style lang="scss" scoped>
.user {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
